<template>
  <el-aside width="250px" class="menu_container">
    <el-scrollbar class="menu-scroll">
      <div v-for="menu in menus" :key="menu.name">
        <div class="menu-group__title">{{ menu.name }}</div>
        <ul>
          <li v-for="m in menu.children" :key="m.path">
            <a class="menu-title__link" :href="menuHref(m)">{{ m.name }}</a>
          </li>
        </ul>
      </div>
    </el-scrollbar>
  </el-aside>
</template>

<script>
  import nav from '$exp/nav.config'
  const packageJson = require('../../package.json')
  const isProd = process.env.NODE_ENV === 'production'
  const publicPath = isProd ? `${packageJson.publicPath}` : ''

  export default {
    computed: {
      isComponent() {
        return this.$route.path.match(/component/)
      },
      context() {
        return this.isComponent ? 'component' : 'guide'
      },
      menus() {
        return nav[this.context]
      },
      menuHref() {
        return function(menu) {
          return `${publicPath}/#/${this.context}${menu.path}`
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .menu_container {
    height: calc(100% - 60px);
    margin-top: 60px;

    ::v-deep {
      .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }

    .menu-scroll {
      height: 100%;
      overflow: hidden;
    }

    .menu-group__title {
      font-size: 16px;
      color: #333;
      font-weight: bold;
      height: 60px;
      line-height: 60px;
    }

    .menu-title__link {
      display: block;
      height: 30px;
      color: #777;
      line-height: 30px;
      font-size: 14px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-weight: 400;

      &:hover {
        color: #409eff;
      }
    }
  }
</style>
